<template>
	<view class="signature">
		<uv-navbar title="签名" placeholder bg-color="transparent" auto-back left-icon-color="#757575"
			title-style="color: #000000; font-size: 32rpx">
			<template #right>
				<uv-text text="提交" color="#4EA770" size="28rpx" @click="signatureRef.save()" />
			</template>
		</uv-navbar>
		<view class="signature-content">
			<uv-text text="签名信息" v-if="params.page == 'picture'" size="28rpx" color="#212121" margin="0 0 20rpx 0" />
			<uv-input v-if="params.page == 'picture'" v-model="name" placeholder="请输入签名信息" />
			<uv-text text="电子签名" size="28rpx" color="#212121" margin="20rpx 0" />
			<uv-icon class="sign-del" :style="{
          top: params.page == 'picture' ? '160rpx' : '40rpx',
        }" name="trash" size="40rpx" color="#F00" @click="delSign" />
			<view class="sign-img" :style="{
          height:
            params.page == 'picture' ? 'calc(100% - 220rpx)' : 'calc(100% - 120rpx)',
        }">
				<g-signature ref="signatureRef" @getImg="getSignImage" />
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		commonUpload
	} from "@/request/common.js";
	import {
		addSignContract,
		signAdd
	} from "@/request/user.js";

	const signatureRef = ref(); // 签名组件ref
	const name = ref(""); // 签名名称
	const signUrl = ref(""); // 签名图片
	const params = ref({}); // 页面传参
	const submitting = ref(false); // 提交中
	onLoad((e) => {
		params.value = JSON.parse(e.res);
	});

	// 获取签名图片
	const getSignImage = (base64) => {
		uni.getImageInfo({
			src: base64,
			success: (image) => {
				commonUpload(image.path).then((res) => {
					if (res.code == 200) {
						signUrl.value = res.fileName;
						handleSubmit();
					}
				});
			},
		});
	};

	// 删除签名
	const delSign = () => {
		signatureRef.value.clear();
		signUrl.value = "";
	};

	// 提交
	const handleSubmit = () => {
		if (submitting.value) return
		submitting.value = true
		if (params.value.page == "picture") {
			// 签名
			let data = {
				name: name.value,
				signUrl: signUrl.value,
				type: 1,
			};
			signAdd(data).then((res) => {
				if (res.code == 200) {
					success();
				}
			});
		} else if (params.value.page == "contract") {
			// 合同签名
			let data = {
				userId: params.value.userId,
				userType: params.value.userType,
				contractId: params.value.contractId,
				signUrl: signUrl.value,
			};
			addSignContract(data).then((res) => {
				if (res.code == 200) {
					success();
				}
			});
		}
	};

	// 成功提示
	const success = () => {
		uni.showToast({
			title: "提交成功，请刷新电脑页面查看",
			icon: "none",
			duration: 3000,
			success: () => {
				submitting.value = false
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
					});
				}, 3000);
			},
		});
	};
</script>
<style lang="scss" scoped>
	.signature {
		width: 100%;
		height: 100vh;
		padding: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		background: linear-gradient(180deg, #ffffff 0%, #50bc7a 100%);

		.signature-content {
			position: relative;
			width: 100%;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			height: calc(100vh - 44px - var(--status-bar-height) - 80rpx);
			background: linear-gradient(180deg, #ace1b5 0%, #fbfbfb 9%, #fbfbfb 100%);
			box-shadow: 0 0 40rpx 4rpx rgba(78, 167, 112, 0.16);
			border-radius: 40rpx;

			.sign-del {
				position: absolute;
				right: 20rpx;
				top: 50rpx;
			}

			.sign-img {
				border-radius: 8rpx;
				border: 2rpx solid #dcdfe6;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>